Shopify UNITE! (#264)

* Migrate ./styles changes

* Migrate ./icons

* Migrate ./embedded

* Migrate ./components

* Build svg icons changes

* Fix relative path

* Add back src/components/README.md

Author: ismail-syed

src/components/AccountConnection/AccountConnection.scss

@@ -3,3 +3,9 @@
 .TermsOfService {
   margin-top: spacing(loose);
 }
+
+.Content {
+  > * + * {
+    margin-top: spacing(tight);
+  }
+}

src/components/AccountConnection/AccountConnection.tsx

@@ -6,7 +6,6 @@ import {buttonFrom} from '../Button';
 import Card from '../Card';
 import SettingAction from '../SettingAction';
 import Stack from '../Stack';
-import TextContainer from '../TextContainer';
 import TextStyle from '../TextStyle';
 
 import * as styles from './AccountConnection.scss';
@@ -43,9 +42,12 @@ export default function AccountConnection({
     )
     : null;
 
-  const titleMarkup = title
-    ? <div>{title}</div>
-    : <div>{accountName}</div>;
+  let titleMarkup: React.ReactNode = null;
+  if (title) {
+    titleMarkup = <div>{title}</div>;
+  } else if (accountName) {
+    titleMarkup = <div>{accountName}</div>;
+  }
 
   const detailsMarkup = details
     ? <div><TextStyle variation="subdued">{details}</TextStyle></div>
@@ -65,10 +67,10 @@ export default function AccountConnection({
         <Stack>
           {avatarMarkup}
           <Stack.Item fill>
-            <TextContainer>
+            <div className={styles.Content}>
               {titleMarkup}
               {detailsMarkup}
-            </TextContainer>
+            </div>
           </Stack.Item>
         </Stack>
       </SettingAction>

src/components/Banner/Banner.scss

@@ -14,7 +14,23 @@ $ribbon-flex-basis: rem(32px);
 $secondary-action-vertical-padding: 0.5 * (control-height() - line-height(body));
 $secondary-action-horizontal-padding: 1.5 * spacing(tight);
 
+@mixin banner-colors($highlight, $background) {
+  background-color: $background;
+  box-shadow:
+    inset 0 $accent-height 0 0 $highlight,
+    inset shadow(transparent),
+    shadow();
+
+  &:focus {
+    box-shadow:
+      inset 0 $accent-height 0 0 $highlight,
+      inset 0 0 0 $accent-height $highlight,
+      shadow();
+  }
+}
+
 .Banner {
+  @include banner-colors(color(ink, lighter), color(sky, light));
   position: relative;
   display: flex;
   padding: spacing();
@@ -34,30 +50,11 @@ $secondary-action-horizontal-padding: 1.5 * spacing(tight);
   padding-right: $dismiss-size + (2 * spacing());
 }
 
-@mixin banner-colors($highlight, $background) {
-  background-color: $background;
-  box-shadow:
-    inset 0 $accent-height 0 0 $highlight,
-    inset shadow(transparent),
-    shadow();
-
-  &:focus {
-    box-shadow:
-      inset 0 $accent-height 0 0 $highlight,
-      inset 0 0 0 $accent-height $highlight,
-      shadow();
-  }
-}
-
-.statusInfo {
-  @include banner-colors(color(ink, lighter), color(sky, light));
-}
-
 .statusSuccess {
   @include banner-colors(color(green), color(green, lighter));
 }
 
-.statusAttention {
+.statusInfo {
   @include banner-colors(color(teal), color(teal, lighter));
 }
 

src/components/Banner/Banner.tsx

@@ -9,11 +9,14 @@ import UnstyledLink from '../UnstyledLink';
 import Icon, {Props as IconProps} from '../Icon';
 
 import * as styles from './Banner.scss';
-import circleAlert from './icons/circle-alert.svg';
-import circleCheckMark from './icons/circle-check-mark.svg';
-import confetti from './icons/confetti.svg';
 
-export type Status = 'success' | 'info' | 'attention' | 'warning' | 'critical';
+import successIcon from './icons/circle-check-mark.svg';
+import infoIcon from './icons/flag.svg';
+import warningIcon from './icons/circle-alert.svg';
+import criticalIcon from './icons/circle-barred.svg';
+import fallbackIcon from './icons/confetti.svg';
+
+export type Status = 'success' | 'info' | 'warning' | 'critical';
 
 export interface Props {
   icon?: IconProps['source'],
@@ -40,23 +43,23 @@ export default function Banner({
   switch (status) {
     case 'success':
       color = 'greenDark';
-      defaultIcon = circleCheckMark;
+      defaultIcon = successIcon;
       break;
-    case 'attention' :
+    case 'info' :
       color = 'tealDark';
-      defaultIcon = confetti;
+      defaultIcon = infoIcon;
       break;
     case 'warning':
       color = 'yellowDark';
-      defaultIcon = circleAlert;
+      defaultIcon = warningIcon;
       break;
     case 'critical':
       color = 'redDark';
-      defaultIcon = circleAlert;
+      defaultIcon = criticalIcon;
       break;
     default:
       color = 'ink';
-      defaultIcon = circleCheckMark;
+      defaultIcon = fallbackIcon;
   }
 
   const className = classNames(

src/components/Banner/icons/circle-alert.svg

@@ -46,11 +46,19 @@ export default function Header({
     : null;
 
   const secondaryActionsMarkup = secondaryActions
-    ? <div>{secondaryActionsFrom(secondaryActions)}</div>
+    ? (
+      <div className={styles.SecondaryActions}>
+        {secondaryActionsFrom(secondaryActions)}
+      </div>
+    )
     : null;
 
   const paginationMarkup = pagination
-    ? <Pagination {...pagination} plain />
+    ? (
+      <div className={styles.Pagination}>
+        <Pagination {...pagination} plain />
+      </div>
+    )
     : null;
 
   const actionsMarkup = primaryActionMarkup || secondaryActionsMarkup

src/components/Banner/icons/circle-barred.svg

@@ -67,10 +67,10 @@ $stacking-order: (
 .Navigation {
   display: flex;
   justify-content: space-between;
+}
 
-  > *:last-child {
-    margin-left: auto;
-  }
+.Pagination {
+  margin-left: auto;
 }
 
 .Actions {
@@ -83,6 +83,10 @@ $stacking-order: (
   }
 }
 
+.SecondaryActions {
+  margin-right: auto;
+}
+
 .PrimaryAction {
   display: flex;
   align-items: center;