braid-design-system 34.2.0 → 34.4.0

package/dist/lib/playroom/components/PlaceholderHeader/PlaceholderHeader.d.mts

@@ -1,11 +1,11 @@
+import * as react from "react";
 import { FC } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/lib/playroom/components/PlaceholderHeader/PlaceholderHeader.d.ts
 declare const logoForBrand: {
-  seek: react_jsx_runtime0.JSX.Element;
-  jobsdb: react_jsx_runtime0.JSX.Element;
-  jobstreet: react_jsx_runtime0.JSX.Element;
+  seek: react.JSX.Element;
+  jobsdb: react.JSX.Element;
+  jobstreet: react.JSX.Element;
 };
 interface PlaceholderHeaderProps {
   brand?: keyof typeof logoForBrand;

package/dist/lib/playroom/playroomState.d.mts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+
 //#region src/lib/playroom/playroomState.d.ts
 interface StateProp {
   stateName?: string;

package/dist/lib/playroom/snippets/ButtonIcon.cjs

@@ -5,6 +5,10 @@ const snippets = [
 		description: "Soft",
 		code: "<ButtonIcon variant=\"soft\" icon={<IconBookmark />} label=\"Bookmark\" />"
 	},
+	{
+		description: "Solid",
+		code: "<ButtonIcon variant=\"solid\" icon={<IconBookmark />} label=\"Bookmark\" />"
+	},
 	{
 		description: "Transparent",
 		code: "<ButtonIcon variant=\"transparent\" icon={<IconHelp />} label=\"Help\" />"

package/dist/lib/playroom/snippets/ButtonIcon.mjs

@@ -4,6 +4,10 @@ const snippets = [
 		description: "Soft",
 		code: "<ButtonIcon variant=\"soft\" icon={<IconBookmark />} label=\"Bookmark\" />"
 	},
+	{
+		description: "Solid",
+		code: "<ButtonIcon variant=\"solid\" icon={<IconBookmark />} label=\"Bookmark\" />"
+	},
 	{
 		description: "Transparent",
 		code: "<ButtonIcon variant=\"transparent\" icon={<IconHelp />} label=\"Help\" />"

package/dist/lib/playroom/snippets/Inline.cjs

@@ -12,6 +12,10 @@ const snippets = [
 	{
 		description: "Responsive space",
 		code: "<Inline space={{ mobile: \"small\", tablet: \"large\" }}>\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n</Inline>"
+	},
+	{
+		description: "No wrap",
+		code: "<Inline space=\"small\" noWrap>\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n</Inline>"
 	}
 ];
 

package/dist/lib/playroom/snippets/Inline.mjs

@@ -11,6 +11,10 @@ const snippets = [
 	{
 		description: "Responsive space",
 		code: "<Inline space={{ mobile: \"small\", tablet: \"large\" }}>\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n</Inline>"
+	},
+	{
+		description: "No wrap",
+		code: "<Inline space=\"small\" noWrap>\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n</Inline>"
 	}
 ];
 

package/dist/lib/playroom/snippets/SteppedSection.cjs

@@ -3,7 +3,7 @@
 const snippets = [{
 	group: "Sections",
 	name: "Stepped Section",
-	code: "<PageBlock width=\"medium\">\n  {setDefaultState(\"progress\", 1)}\n  {setDefaultState(\"activeStep\", 1)}\n  <Stack space=\"large\">\n    <Stepper\n      label=\"Stepped Block\"\n      align=\"left\"\n      progress={getState(\"progress\")}\n      activeStep={getState(\"activeStep\")}\n      onStepClick={({ stepNumber }) => setState(\"activeStep\", stepNumber)}\n    >\n      <Step>Step 1</Step>\n      <Step>Step 2</Step>\n      <Step>Step 3</Step>\n      <Step>Step 4</Step>\n      <Step>Step 5</Step>\n    </Stepper>\n\n    {getState(\"activeStep\") === 1 && (\n      <Placeholder label=\"Step content 1\" height={400} />\n    )}\n    {getState(\"activeStep\") === 2 && (\n      <Placeholder label=\"Step content 2\" height={400} />\n    )}\n    {getState(\"activeStep\") === 3 && (\n      <Placeholder label=\"Step content 3\" height={400} />\n    )}\n    {getState(\"activeStep\") === 4 && (\n      <Placeholder label=\"Step content 4\" height={400} />\n    )}\n    {getState(\"activeStep\") === 5 && (\n      <Placeholder label=\"Step content 5\" height={400} />\n    )}\n\n    <Columns space=\"small\">\n      <Column>\n        {getState(\"activeStep\") > 1 && (\n          <Actions>\n            <Button\n              icon={<IconArrow direction=\"left\" />}\n              onClick={() => setState(\"activeStep\", getState(\"activeStep\") - 1)}\n            >\n              Back\n            </Button>\n          </Actions>\n        )}\n      </Column>\n      <Column width=\"content\">\n        {getState(\"activeStep\") < 5 && (\n          <Actions>\n            <Button\n              variant=\"solid\"\n              tone=\"formAccent\"\n              icon={<IconArrow direction=\"right\" />}\n              iconPosition=\"trailing\"\n              onClick={() => {\n                const newStep = getState(\"activeStep\") + 1\n                setState(\"activeStep\", newStep)\n                if (newStep > getState(\"progress\")) {\n                  setState(\"progress\", newStep)\n                }\n              }}\n            >\n              Continue\n            </Button>\n          </Actions>\n        )}\n      </Column>\n    </Columns>\n  </Stack>\n</PageBlock>"
+	code: "<PageBlock width=\"medium\">\n  {setDefaultState(\"progress\", 1)}\n  {setDefaultState(\"activeStep\", 1)}\n  <Stack space=\"large\">\n    <Stepper\n      label=\"Stepped Block\"\n      align=\"left\"\n      progress={getState(\"progress\")}\n      activeStep={getState(\"activeStep\")}\n      onStepClick={({ stepNumber }) => setState(\"activeStep\", stepNumber)}\n    >\n      <Step>Step 1</Step>\n      <Step>Step 2</Step>\n      <Step>Step 3</Step>\n      <Step>Step 4</Step>\n    </Stepper>\n\n    {getState(\"activeStep\") === 1 && (\n      <Placeholder label=\"Step content 1\" height={400} />\n    )}\n    {getState(\"activeStep\") === 2 && (\n      <Placeholder label=\"Step content 2\" height={400} />\n    )}\n    {getState(\"activeStep\") === 3 && (\n      <Placeholder label=\"Step content 3\" height={400} />\n    )}\n    {getState(\"activeStep\") === 4 && (\n      <Placeholder label=\"Step content 4\" height={400} />\n    )}\n\n    <Spread space=\"small\">\n      <Actions>\n        {getState(\"activeStep\") > 1 && (\n          <Button\n            variant=\"soft\"\n            icon={<IconArrow direction=\"left\" />}\n            onClick={() => setState(\"activeStep\", getState(\"activeStep\") - 1)}\n          >\n            Back\n          </Button>\n        )}\n      </Actions>\n      <Actions>\n        {getState(\"activeStep\") < 4 ? (\n          <Button\n            variant=\"solid\"\n            tone=\"formAccent\"\n            icon={<IconArrow direction=\"right\" />}\n            iconPosition=\"trailing\"\n            onClick={() => {\n              const newStep = getState(\"activeStep\") + 1\n              setState(\"activeStep\", newStep)\n              if (newStep > getState(\"progress\")) {\n                setState(\"progress\", newStep)\n              }\n            }}\n          >\n            Continue\n          </Button>\n        ) : (\n          <Button\n            variant=\"solid\"\n            tone=\"brandAccent\"\n            icon={<IconSend />}\n            iconPosition=\"trailing\"\n          >\n            Submit\n          </Button>\n        )}\n      </Actions>\n    </Spread>\n  </Stack>\n</PageBlock>"
 }];
 
 //#endregion

package/dist/lib/playroom/snippets/SteppedSection.mjs

@@ -2,7 +2,7 @@
 const snippets = [{
 	group: "Sections",
 	name: "Stepped Section",
-	code: "<PageBlock width=\"medium\">\n  {setDefaultState(\"progress\", 1)}\n  {setDefaultState(\"activeStep\", 1)}\n  <Stack space=\"large\">\n    <Stepper\n      label=\"Stepped Block\"\n      align=\"left\"\n      progress={getState(\"progress\")}\n      activeStep={getState(\"activeStep\")}\n      onStepClick={({ stepNumber }) => setState(\"activeStep\", stepNumber)}\n    >\n      <Step>Step 1</Step>\n      <Step>Step 2</Step>\n      <Step>Step 3</Step>\n      <Step>Step 4</Step>\n      <Step>Step 5</Step>\n    </Stepper>\n\n    {getState(\"activeStep\") === 1 && (\n      <Placeholder label=\"Step content 1\" height={400} />\n    )}\n    {getState(\"activeStep\") === 2 && (\n      <Placeholder label=\"Step content 2\" height={400} />\n    )}\n    {getState(\"activeStep\") === 3 && (\n      <Placeholder label=\"Step content 3\" height={400} />\n    )}\n    {getState(\"activeStep\") === 4 && (\n      <Placeholder label=\"Step content 4\" height={400} />\n    )}\n    {getState(\"activeStep\") === 5 && (\n      <Placeholder label=\"Step content 5\" height={400} />\n    )}\n\n    <Columns space=\"small\">\n      <Column>\n        {getState(\"activeStep\") > 1 && (\n          <Actions>\n            <Button\n              icon={<IconArrow direction=\"left\" />}\n              onClick={() => setState(\"activeStep\", getState(\"activeStep\") - 1)}\n            >\n              Back\n            </Button>\n          </Actions>\n        )}\n      </Column>\n      <Column width=\"content\">\n        {getState(\"activeStep\") < 5 && (\n          <Actions>\n            <Button\n              variant=\"solid\"\n              tone=\"formAccent\"\n              icon={<IconArrow direction=\"right\" />}\n              iconPosition=\"trailing\"\n              onClick={() => {\n                const newStep = getState(\"activeStep\") + 1\n                setState(\"activeStep\", newStep)\n                if (newStep > getState(\"progress\")) {\n                  setState(\"progress\", newStep)\n                }\n              }}\n            >\n              Continue\n            </Button>\n          </Actions>\n        )}\n      </Column>\n    </Columns>\n  </Stack>\n</PageBlock>"
+	code: "<PageBlock width=\"medium\">\n  {setDefaultState(\"progress\", 1)}\n  {setDefaultState(\"activeStep\", 1)}\n  <Stack space=\"large\">\n    <Stepper\n      label=\"Stepped Block\"\n      align=\"left\"\n      progress={getState(\"progress\")}\n      activeStep={getState(\"activeStep\")}\n      onStepClick={({ stepNumber }) => setState(\"activeStep\", stepNumber)}\n    >\n      <Step>Step 1</Step>\n      <Step>Step 2</Step>\n      <Step>Step 3</Step>\n      <Step>Step 4</Step>\n    </Stepper>\n\n    {getState(\"activeStep\") === 1 && (\n      <Placeholder label=\"Step content 1\" height={400} />\n    )}\n    {getState(\"activeStep\") === 2 && (\n      <Placeholder label=\"Step content 2\" height={400} />\n    )}\n    {getState(\"activeStep\") === 3 && (\n      <Placeholder label=\"Step content 3\" height={400} />\n    )}\n    {getState(\"activeStep\") === 4 && (\n      <Placeholder label=\"Step content 4\" height={400} />\n    )}\n\n    <Spread space=\"small\">\n      <Actions>\n        {getState(\"activeStep\") > 1 && (\n          <Button\n            variant=\"soft\"\n            icon={<IconArrow direction=\"left\" />}\n            onClick={() => setState(\"activeStep\", getState(\"activeStep\") - 1)}\n          >\n            Back\n          </Button>\n        )}\n      </Actions>\n      <Actions>\n        {getState(\"activeStep\") < 4 ? (\n          <Button\n            variant=\"solid\"\n            tone=\"formAccent\"\n            icon={<IconArrow direction=\"right\" />}\n            iconPosition=\"trailing\"\n            onClick={() => {\n              const newStep = getState(\"activeStep\") + 1\n              setState(\"activeStep\", newStep)\n              if (newStep > getState(\"progress\")) {\n                setState(\"progress\", newStep)\n              }\n            }}\n          >\n            Continue\n          </Button>\n        ) : (\n          <Button\n            variant=\"solid\"\n            tone=\"brandAccent\"\n            icon={<IconSend />}\n            iconPosition=\"trailing\"\n          >\n            Submit\n          </Button>\n        )}\n      </Actions>\n    </Spread>\n  </Stack>\n</PageBlock>"
 }];
 
 //#endregion

package/dist/lib/themes/baseTokens/nvl.cjs

@@ -40,41 +40,41 @@ const makeTokens = ({ name, displayName, brandAccent, brandAccentLight, brandAcc
 					"1": {
 						mobile: {
 							fontSize: 28,
-							lineGap: 11
+							lineGap: 17
 						},
 						tablet: {
 							fontSize: 36,
-							lineGap: 14
+							lineGap: 22
 						}
 					},
 					"2": {
 						mobile: {
 							fontSize: 24,
-							lineGap: 11
+							lineGap: 15
 						},
 						tablet: {
 							fontSize: 30,
-							lineGap: 13
+							lineGap: 18
 						}
 					},
 					"3": {
 						mobile: {
 							fontSize: 22,
-							lineGap: 10
+							lineGap: 14
 						},
 						tablet: {
 							fontSize: 24,
-							lineGap: 11
+							lineGap: 15
 						}
 					},
 					"4": {
 						mobile: {
 							fontSize: 20,
-							lineGap: 9
+							lineGap: 12
 						},
 						tablet: {
 							fontSize: 20,
-							lineGap: 9
+							lineGap: 12
 						}
 					}
 				}

package/dist/lib/themes/baseTokens/nvl.mjs

@@ -39,41 +39,41 @@ const makeTokens = ({ name, displayName, brandAccent, brandAccentLight, brandAcc
 					"1": {
 						mobile: {
 							fontSize: 28,
-							lineGap: 11
+							lineGap: 17
 						},
 						tablet: {
 							fontSize: 36,
-							lineGap: 14
+							lineGap: 22
 						}
 					},
 					"2": {
 						mobile: {
 							fontSize: 24,
-							lineGap: 11
+							lineGap: 15
 						},
 						tablet: {
 							fontSize: 30,
-							lineGap: 13
+							lineGap: 18
 						}
 					},
 					"3": {
 						mobile: {
 							fontSize: 22,
-							lineGap: 10
+							lineGap: 14
 						},
 						tablet: {
 							fontSize: 24,
-							lineGap: 11
+							lineGap: 15
 						}
 					},
 					"4": {
 						mobile: {
 							fontSize: 20,
-							lineGap: 9
+							lineGap: 12
 						},
 						tablet: {
 							fontSize: 20,
-							lineGap: 9
+							lineGap: 12
 						}
 					}
 				}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "34.2.0",
+  "version": "34.4.0",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {