@automattic/vip-design-system 2.18.1 → 2.20.0

package/build/system/Text/Text.stories.js

@@ -20,6 +20,21 @@ export var Default = {
     return _jsxs(_Fragment, {
       children: [_jsxs(Text, {
         children: ["Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.", ' ']
+      }), _jsx(Text, {
+        variant: "default",
+        children: "Body Default"
+      }), _jsx(Text, {
+        variant: "small",
+        children: "Body Small"
+      }), _jsx(Text, {
+        variant: "large",
+        children: "Body Large"
+      }), _jsx(Text, {
+        variant: "mono",
+        children: "Body Mono"
+      }), _jsx(Text, {
+        variant: "mono-bold",
+        children: "Body Mono Bold"
       }), _jsx(Text, {
         sx: {
           color: 'texts.accent'
@@ -33,13 +48,7 @@ export var Default = {
       }), _jsx(Text, {
         sx: {
           color: 'texts.helper',
-          fontWeight: 'body'
-        },
-        children: "Text Helper"
-      }), _jsx(Text, {
-        sx: {
-          color: 'texts.helper',
-          fontWeight: 'heading'
+          fontWeight: 'light'
         },
         children: "Text Helper"
       }), _jsx(Text, {
@@ -60,12 +69,6 @@ export var Default = {
           fontWeight: 'bold'
         },
         children: "Text Helper"
-      }), _jsx(Text, {
-        sx: {
-          color: 'texts.helper',
-          fontWeight: 'light'
-        },
-        children: "Text Helper"
       }), _jsx(Text, {
         sx: {
           color: 'texts.secondary'

package/build/system/Toolbar/Logo.js

@@ -10,7 +10,7 @@ import { Link } from 'theme-ui';
 /**
  * Internal dependencies
  */
-import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 var VIP_LOGO = 'vip-logo-component';
 /**
  * The WordPress VIP logo rendered as an SVG inside a themed link.
@@ -29,15 +29,31 @@ export var Logo = function Logo(_ref) {
     },
     href: href,
     as: as,
-    children: _jsx("svg", {
+    children: _jsxs("svg", {
       className: classNames(VIP_LOGO, className),
       xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 55 24",
+      viewBox: "0 0 393.6 176.6",
       role: "img",
       "aria-label": "WordPress VIP Logo",
-      children: _jsx("path", {
-        d: "m12.014 0c-6.6103 0-12.014 5.3911-12.014 11.986 0 6.6226 5.4034 12.014 12.014 12.014 6.6377 0 12.041-5.3911 12.041-12.014 0-6.5952-5.4035-11.986-12.041-11.986zm-10.807 11.986c0-1.5598 0.32914-3.0376 0.93257-4.3786l5.1566 14.094c-3.5931-1.7515-6.0891-5.4459-6.0891-9.715zm10.807 10.782c-1.0697 0-2.0846-0.1642-3.0446-0.4378l3.2366-9.4139 3.3189 9.0855c0.0274 0.0547 0.0548 0.1094 0.0823 0.1368-1.1246 0.4105-2.3315 0.6294-3.5932 0.6294zm1.5086-15.818c0.6583-0.02737 1.2343-0.10946 1.2343-0.10946 0.576-0.0821 0.5211-0.93045-0.0823-0.87572 0 0-1.7554 0.13683-2.88 0.13683-1.0697 0-2.8526-0.13683-2.8526-0.13683-0.576-0.02736-0.65828 0.84835-0.05485 0.87572 0 0 0.54857 0.05473 1.1245 0.10946l1.6732 4.5975-2.3589 7.0604-3.9223-11.658c0.65828-0.02737 1.2343-0.10946 1.2343-0.10946 0.576-0.0821 0.52115-0.93045-0.08228-0.87572 0 0-1.7554 0.13683-2.88 0.13683h-0.68572c1.9474-2.9555 5.2663-4.8985 9.024-4.8985 2.8252 0 5.376 1.0673 7.296 2.8187h-0.1371c-1.0697 0-1.8103 0.93044-1.8103 1.9156 0 0.87571 0.5211 1.642 1.0697 2.5177 0.4114 0.71152 0.8777 1.642 0.8777 2.9829 0 0.9304-0.2743 2.0798-0.8228 3.4755l-1.0698 3.5849-3.8948-11.548zm3.9223 14.367l3.2914-9.5233c0.6034-1.5325 0.8229-2.764 0.8229-3.8586 0-0.41049-0.0275-0.76625-0.0823-1.122 0.8503 1.5325 1.3165 3.3113 1.3165 5.1722 0.0275 3.9955-2.112 7.4709-5.3485 9.3318zm17.472-14.86l-2.4412 7.1425c-0.2468 0.8757-0.4663 1.6967-0.5485 2.463h-0.0549c-0.0549-0.7663-0.2743-1.6146-0.5486-2.463l-2.4411-7.1425h-3.2092l4.608 12.068h3.2915l4.608-12.068h-3.264zm4.8548 0l-0.9051 2.3808v9.6602h3.2366v-12.041h-2.3315zm13.879 1.423c-0.7954-1.0946-1.92-1.642-3.3463-1.642-1.5086 0-2.5509 0.60206-3.3189 1.7788h-0.1645l-0.4663-1.5599h-2.6332v17.542h3.2366v-5.0627c0-0.1642-0.0548-0.7389-0.1646-1.7514h0.1646c0.7954 1.0399 1.8103 1.5325 3.2366 1.5325 0.9326 0 1.7554-0.2463 2.4686-0.7389 0.6857-0.4926 1.2342-1.2315 1.6182-2.1619 0.384-0.9579 0.576-2.0799 0.576-3.3661 0-1.9429-0.4114-3.4754-1.2068-4.5701zm-4.2514 8.1825c-0.8229 0-1.4538-0.2737-1.8378-0.8484-0.384-0.5473-0.576-1.4778-0.576-2.7913v-0.3558c0.0275-1.1494 0.2195-1.9703 0.576-2.4629 0.384-0.49259 0.96-0.73888 1.7829-0.73888 0.768 0 1.344 0.30103 1.7006 0.90308 0.3565 0.60203 0.5485 1.4777 0.5485 2.6818 0.0275 2.3809-0.7131 3.6124-2.1942 3.6124z"
-      })
+      sx: {
+        display: 'block',
+        width: '100%',
+        height: 'auto'
+      },
+      children: [_jsx("path", {
+        fill: "currentColor",
+        d: "m88.3,0C39.6,0,0,39.6,0,88.3s39.6,88.3,88.3,88.3,88.3-39.5,88.3-88.3S137.1,0,88.3,0ZM8.8,88.3c0-11.5,2.5-22.5,6.8-32.4l37.8,103.8c-26-13-44.6-39.9-44.6-71.4Zm79.5,79.5c-7.7,0-15.3-1.1-22.5-3.2l23.7-69.2,24.4,66.9c.2.4.4.7.5,1.1-8.1,2.8-16.7,4.4-26.1,4.4Zm11-116.8c4.8-.4,9-.7,9-.7,4.1-.5,3.8-6.8-.5-6.5,0,0-13,.9-21.2.9-7.7,0-20.9-.9-20.9-.9-4.1-.4-4.8,6.3-.5,6.5,0,0,4.1.5,8.3.7l12.2,34-17.2,52-28.6-86c4.8-.4,9-.7,9-.7,4.1-.5,3.8-6.8-.5-6.5,0,0-13,.9-21.2.9-1.6,0-3.2,0-5.2-.2C36.1,23,60.5,8.8,88.2,8.8c20.7,0,39.5,7.9,53.6,20.9h-1.1c-7.7,0-13.3,6.8-13.3,14.2,0,6.5,3.8,12.2,7.7,18.7,2.9,5.2,6.5,12.2,6.5,21.9,0,6.8-2,15.5-6.1,25.7l-7.9,26.3-28.3-85.5Zm29.2,106l24.3-70.1c4.5-11.3,6.1-20.3,6.1-28.4,0-2.9-.2-5.5-.5-8.1,6.3,11.3,9.7,24.3,9.7,38.1-.3,29.1-16.3,54.8-39.6,68.5Z"
+      }), _jsx("path", {
+        fill: "currentColor",
+        d: "m323.7,39.2h33.4c7.2,0,13.1.9,17.8,2.5,4.7,1.6,8.5,3.8,11.1,6.5,2.9,2.7,4.7,5.8,5.8,9.3,1.1,3.4,1.8,7.2,1.8,11,0,4.1-.5,8.1-1.8,11.9-1.1,3.8-3.1,7-5.8,10.1-2.7,2.9-6.5,5.1-11,6.6-4.5,1.6-10.4,2.5-17.5,2.5h-14.7v33.4h-19.2V39.2h.1Zm33.3,44.1c3.4,0,6.3-.4,8.5-1.1,2.4-.7,4.1-1.6,5.4-2.9,1.3-1.3,2.1-2.7,2.7-4.5.5-1.8.7-3.8.7-5.9s-.2-4.1-.7-5.8c-.5-1.6-1.4-3.1-2.7-4.1-1.3-1.1-3.1-2-5.4-2.7-2.1-.5-5.1-.9-8.5-.9h-14v27.8h14v.1Z"
+      }), _jsx("path", {
+        fill: "currentColor",
+        d: "m197.5,39.2h21.9l22.8,66.3,23.4-66.3h21l-35.3,93.9h-18.5l-35.3-93.9Z"
+      }), _jsx("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "m311,39.2h-13.3l-6.3,16.9v76.9h19.6V39.2Z"
+      })]
     })
   });
 };

package/build/system/Wizard/Wizard.stories.js

@@ -24,16 +24,16 @@ export var Primary = {
     summaryAs: 'dl',
     steps: [{
       title: 'Step One',
-      titleVariant: 'h2',
+      titleVariant: 'h3',
       subTitle: 'First step description.',
       children: 'Step one content'
     }, {
       title: 'Step Two',
-      titleVariant: 'h2',
+      titleVariant: 'h3',
       subTitle: 'Second step description.'
     }, {
       title: 'Step Three',
-      titleVariant: 'h2'
+      titleVariant: 'h3'
     }]
   }
 };
@@ -41,7 +41,7 @@ export var Default = {
   render: function render() {
     var steps = [{
       title: 'Choose Domain',
-      titleVariant: 'h2',
+      titleVariant: 'h3',
       subTitle: 'You can bring a domain name you already own, or buy a new one.',
       children: _jsxs(Box, {
         children: [_jsx(Label, {
@@ -57,14 +57,14 @@ export var Default = {
       })
     }, {
       title: 'Configure DNS',
-      titleVariant: 'h2',
+      titleVariant: 'h3',
       summaryTitle: 'Summary of Configure DNS'
     }, {
       title: 'Configure Certificate',
-      titleVariant: 'h2'
+      titleVariant: 'h3'
     }, {
       title: 'Verify Domain',
-      titleVariant: 'h2'
+      titleVariant: 'h3'
     }];
     return _jsx(React.Fragment, {
       children: _jsx(Box, {
@@ -90,7 +90,7 @@ export var WithTitleAutoFocus = {
       setAutoFocus = _React$useState2[1];
     var steps = [{
       title: 'Choose Domain',
-      titleVariant: 'h2',
+      titleVariant: 'h3',
       summary: [{
         label: 'Demo Label',
         value: 'Demo value'
@@ -115,7 +115,7 @@ export var WithTitleAutoFocus = {
       })
     }, {
       title: 'Configure DNS',
-      titleVariant: 'h2',
+      titleVariant: 'h3',
       onChange: function onChange() {
         return setActiveStep(1);
       },
@@ -137,7 +137,7 @@ export var WithTitleAutoFocus = {
       })
     }, {
       title: 'Certificate',
-      titleVariant: 'h2',
+      titleVariant: 'h3',
       summary: [{
         label: 'Certificate status',
         value: 'Not found'
@@ -202,7 +202,7 @@ export var HideStepText = {
       setActiveStep = _React$useState3[1];
     var steps = [{
       title: 'Included Logs',
-      titleVariant: 'h2',
+      titleVariant: 'h3',
       subTitle: '',
       children: _jsx(Text, {
         sx: {

package/build/system/Wizard/WizardStep.js

@@ -104,8 +104,6 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
         sx: {
           mb: 0,
           color: headingColor,
-          fontSize: 2,
-          fontWeight: 'heading',
           flexGrow: 1
         },
         ref: titleRef,