@@ -685,32 +685,31 @@ const Example = () => {
685685 </Flex.Item>
686686 </Flex>
687687 <hr style={{width:'100%', margin:'2rem 0 1rem'}}/>
688- <InstUISettingsProvider theme={themes[themeName]}>
689- <InstUISettingsProvider
690- themeOverride={{
691- semantics: {
692- color: {
693- institutional: { brandPrimary, brandFontColorDark }
694- }
688+ <InstUISettingsProvider
689+ theme={themes[themeName]}
690+ themeOverride={{
691+ semantics: {
692+ color: {
693+ institutional: { brandPrimary, brandFontColorDark }
695694 }
696- }}
697- >
698- <Tabs >
699- <Tabs.Panel id="tabA" renderTitle="Tab A" isSelected={true}></Tabs.Panel >
700- <Tabs.Panel id="tabB " renderTitle="Tab B" ></Tabs.Panel>
701- <Tabs.Panel id="tabC " renderTitle="Tab C "></Tabs.Panel>
702- </Tabs>
703- <Flex gap="medium" margin="medium 0 0 0" >
704- <Flex.Item >
705- <Badge count={42} countUntil={100} margin="0 medium 0 0" >
706- <Button color="secondary">Notifications</Button >
707- </Badge >
708- </Flex.Item >
709- < Flex.Item shouldGrow >
710- <Text>Default body text — uses brandFontColorDark.</Text >
711- </Flex.Item >
712- </Flex>
713- </InstUISettingsProvider >
695+ }
696+ }}
697+ >
698+ <Tabs>
699+ <Tabs.Panel id="tabA " renderTitle="Tab A" isSelected={true} ></Tabs.Panel>
700+ <Tabs.Panel id="tabB " renderTitle="Tab B "></Tabs.Panel>
701+ <Tabs.Panel id="tabC" renderTitle="Tab C">< /Tabs.Panel >
702+ </Tabs >
703+ <Flex gap="medium" margin="medium 0 0 0" >
704+ <Flex.Item >
705+ <Badge count={42} countUntil={100} margin="0 medium 0 0" >
706+ <Button color="secondary">Notifications</Button >
707+ </Badge >
708+ </ Flex.Item>
709+ <Flex.Item shouldGrow >
710+ <Text>Default body text — uses brandFontColorDark.</Text >
711+ </Flex.Item >
712+ </Flex >
714713 </InstUISettingsProvider>
715714 </div>
716715 )
@@ -771,18 +770,17 @@ const Example = () => {
771770 </Flex.Item>
772771 </Flex>
773772 <hr style={{width:'100%', margin:'2rem 0 1rem'}}/>
774- <InstUISettingsProvider theme={themes[themeName]}>
775- <InstUISettingsProvider
776- themeOverride={{
777- semantics: {
778- color: {
779- institutional: { brandButtonPrimaryBgd, brandButtonPrimaryText }
780- }
773+ <InstUISettingsProvider
774+ theme={themes[themeName]}
775+ themeOverride={{
776+ semantics: {
777+ color: {
778+ institutional: { brandButtonPrimaryBgd, brandButtonPrimaryText }
781779 }
782- }}
783- >
784- <Button color="primary">I'm a 'primary' color button</Button >
785- </InstUISettingsProvider >
780+ }
781+ }}
782+ >
783+ <Button color="primary">I'm a 'primary' color button</Button >
786784 </InstUISettingsProvider>
787785 </div>
788786 )
@@ -834,30 +832,29 @@ const Example = () => {
834832 </Flex.Item>
835833 </Flex>
836834 <hr style={{width:'100%', margin:'2rem 0 1rem'}}/>
837- <InstUISettingsProvider theme={themes[themeName]}>
838- <InstUISettingsProvider
839- themeOverride={{
840- semantics: {
841- color: {
842- institutional: { linkColor }
843- }
835+ <InstUISettingsProvider
836+ theme={themes[themeName]}
837+ themeOverride={{
838+ semantics: {
839+ color: {
840+ institutional: { linkColor }
844841 }
845- }}
846- >
847- <Flex gap="small" >
848- <Flex.Item size="50% ">
849- <Link href="https://instructure.github.io/instructure-ui/">normal link</Link >
850- </Flex.Item >
851- < Flex.Item size="50%" >
852- <Billboard
853- margin="small"
854- message="Billboard with link "
855- href="http://instructure.com "
856- hero={(size) => <IconGradebookLine size={size} />}
857- />
858- </Flex.Item >
859- </Flex>
860- </InstUISettingsProvider >
842+ }
843+ }}
844+ >
845+ <Flex gap="small ">
846+ <Flex.Item size="50%" >
847+ <Link href="https://instructure.github.io/instructure-ui/">normal link</Link >
848+ </ Flex.Item>
849+ <Flex.Item size="50%">
850+ <Billboard
851+ margin="small "
852+ message="Billboard with link "
853+ href="http://instructure.com"
854+ hero={(size) => <IconGradebookLine size={size} />}
855+ / >
856+ </Flex.Item >
857+ </Flex >
861858 </InstUISettingsProvider>
862859 </div>
863860 )
@@ -912,34 +909,33 @@ const Example = () => {
912909 </Flex.Item>
913910 </Flex>
914911 <hr style={{width:'100%', margin:'2rem 0 1rem'}}/>
915- <InstUISettingsProvider theme={themes[themeName]}>
916- <InstUISettingsProvider
917- themeOverride={{
918- semantics: {
919- color: {
920- institutional: {
921- brandGlobalNavBgd,
922- globalNavLinkHover,
923- brandGlobalNavMenuItemTextColor,
924- brandGlobalNavMenuItemTextColorActive
925- }
912+ <InstUISettingsProvider
913+ theme={themes[themeName]}
914+ themeOverride={{
915+ semantics: {
916+ color: {
917+ institutional: {
918+ brandGlobalNavBgd,
919+ globalNavLinkHover,
920+ brandGlobalNavMenuItemTextColor,
921+ brandGlobalNavMenuItemTextColorActive
926922 }
927923 }
924+ }
925+ }}
926+ >
927+ <SideNavBar
928+ label="Main navigation"
929+ toggleLabel={{
930+ expandedLabel: 'Minimize SideNavBar',
931+ minimizedLabel: 'Expand SideNavBar'
928932 }}
929933 >
930- <SideNavBar
931- label="Main navigation"
932- toggleLabel={{
933- expandedLabel: 'Minimize SideNavBar',
934- minimizedLabel: 'Expand SideNavBar'
935- }}
936- >
937- <SideNavBar.Item icon={<IconUserLine />} label="Home" href="#" />
938- <SideNavBar.Item icon={<IconAdminLine />} label="Admin" href="#" />
939- <SideNavBar.Item selected icon={<IconDashboardLine />} label="Dashboard" href="#" />
940- <SideNavBar.Item icon={<IconInboxLine />} label="Inbox" href="#" />
941- </SideNavBar>
942- </InstUISettingsProvider>
934+ <SideNavBar.Item icon={<IconUserLine />} label="Home" href="#" />
935+ <SideNavBar.Item icon={<IconAdminLine />} label="Admin" href="#" />
936+ <SideNavBar.Item selected icon={<IconDashboardLine />} label="Dashboard" href="#" />
937+ <SideNavBar.Item icon={<IconInboxLine />} label="Inbox" href="#" />
938+ </SideNavBar>
943939 </InstUISettingsProvider>
944940 </div>
945941 )
0 commit comments